<template>
    <div class="pages">
        <div class="dashboard-columns">
            <div class="dashboard-column">
                <div class="dashboard-column-label">会员总数</div>
                <div class="dashboard-column-value">
                    <i class="fa fa-group"></i>
                    {{ usercount || 0 }}
                </div>
            </div>
            <div class="dashboard-column">
                <div class="dashboard-column-label">今日新增会员</div>
                <div class="dashboard-column-value">
                    <i class="fa fa-line-chart"></i>
                    {{ todayUserCount || 0 }}
                </div>
            </div>
            <div class="dashboard-column">
                <div class="dashboard-column-label">订单总数</div>
                <div class="dashboard-column-value">
                    <i class="fa fa-sitemap"></i>
                    {{ orderCount || 0 }}
                </div>
            </div>
			<div class="dashboard-column">
			    <div class="dashboard-column-label">今日订单数</div>
			    <div class="dashboard-column-value">
			        <i class="fa fa-file-text"></i>
			        {{ todayOrderCount || 0 }}
			    </div>
			</div>
            <div class="dashboard-column" @click="$router.push('/order')">
                <div class="dashboard-column-label">订单金额</div>
                <div class="dashboard-column-value">
                    <i class="fa fa-object-group"></i>
                    {{ orderMoney || 0 }}
                </div>
            </div>
            <div class="dashboard-column">
                <div class="dashboard-column-label">总报名人数</div>
                <div class="dashboard-column-value">
                    <i class="fa fa-user"></i>
                    {{ allData?.total_people || 0 }}
                </div>
            </div>
            <div class="dashboard-column" @click="$router.push('/coursemoney?family_status=1,2,5')">
                <div class="dashboard-column-label">总报名金额</div>
                <div class="dashboard-column-value">
                    <i class="fa fa-money"></i>
                    {{ allData?.total_price || 0 }}
                </div>
            </div>
            <div class="dashboard-column">
                <div class="dashboard-column-label">今日报名数</div>
                <div class="dashboard-column-value">
                    <i class="fa fa-user"></i>
                    {{ allData?.day_total_people || 0 }}
                </div>
            </div>
            <div class="dashboard-column">
                <div class="dashboard-column-label">今日报名总金额</div>
                <div class="dashboard-column-value">
                    <i class="fa fa-money"></i>
                    {{ allData?.day_total_price || 0 }}
                </div>
            </div>
        </div>
        <div class="dashboard-charts">
            <v-chart
                class="dashboard-chart"
                :option="option1"
                autoresize
            ></v-chart>
            <v-chart
                class="dashboard-chart"
                :option="option2"
                autoresize
            ></v-chart>
        </div>
    </div>
</template>

<script>
import { get } from "@/assets/js/http.js";

export default {
    name: "view-dashboard",
    data() {
        return {
            orderMoney: 0,
            todayOrderCount: 0,
            orderCount: 0,
            todayUserCount: 0,
            usercount: 0,
			todayOrderMoney:0,
            allData:null,
            option1: {
                color: ["#80FFA5"],
                title: {
                    text: "近七天会员增长情况"
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#6a7985"
                        }
                    }
                },
                legend: {
                    data: []
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true
                },
                xAxis: [
                    {
                        type: "category",
                        boundaryGap: false,
                        data: []
                    }
                ],
                yAxis: [
                    {
                        type: "value"
                    }
                ],
                series: [
                    {
                        name: "数量",
                        type: "line",
                        stack: "Total",
                        smooth: true,
                        lineStyle: {
                            width: 0
                        },
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.8,
                            color: "#80FFA5"
                        },
                        emphasis: {
                            focus: "series"
                        },
                        data: []
                    }
                ]
            },
            option2: {
                color: ["#409EFF"],
                title: {
                    text: "近七天订单数"
                },
                tooltip: {
                    trigger: "axis",
                    axisPointer: {
                        type: "cross",
                        label: {
                            backgroundColor: "#6a7985"
                        }
                    }
                },
                legend: {
                    data: []
                },
                grid: {
                    left: "3%",
                    right: "4%",
                    bottom: "3%",
                    containLabel: true
                },
                xAxis: [
                    {
                        type: "category",
                        boundaryGap: false,
                        data: []
                    }
                ],
                yAxis: [
                    {
                        type: "value"
                    }
                ],
                series: [
                    {
                        name: "数量",
                        type: "line",
                        stack: "Total",
                        smooth: true,
                        lineStyle: {
                            width: 0
                        },
                        showSymbol: false,
                        areaStyle: {
                            opacity: 0.8,
                            color: "#409EFF"
                        },
                        emphasis: {
                            focus: "series"
                        },
                        data: []
                    }
                ]
            }
        };
    },
    mounted() {
        this.getColumnsData();
    },
    methods: {
        async getColumnsData() {
            const result = await get({
                url: "/admin/Dashboard/dashboard",
                params: {}
            });
            this.orderMoney = result.orderMoney;
            this.todayOrderCount = result.todayOrderCount;
            this.orderCount = result.orderCount;
            this.todayUserCount = result.todayUserCount;
            this.usercount = result.usercount;
			this.todayOrderMoney = result.todayOrderMoney
            this.option1.xAxis[0].data = result.days;
            this.option2.xAxis[0].data = result.days;
            this.option1.series[0].data = result.allUserReList;
            this.option2.series[0].data = result.allOrderReList;
            this.allData = result
        }
    }
};
</script>

<style>
	.pages{
		box-sizing: border-box;
		width: 100%;
		height: 100%;
		overflow: auto;
		padding: 0 15px;
		background-color:#FFF;
		/* background-color: rgb(242, 243, 245); */
	}
.dashboard-columns {
    display: flex;
    align-items: center;
    margin: 20px 0;
    flex-wrap: wrap;
}

.dashboard-column {
    width: 16%;
    /* min-width: 19%; */
    background-color: #fcfeff;
    overflow: hidden;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0px 0px 0px 0px rgba(150, 150, 150, 0.35);
}

.dashboard-column:hover {
    transform: translateY(-5px);
    box-shadow: 0px 5px 10px 5px rgba(150, 150, 150, 0.35);
}

.dashboard-column-label {
    color: #92969a;
    font-size: 15px;
    margin: 20px;
}

.dashboard-column-value {
    font-size: 28px;
    color: #2c3f5d;
    margin: 20px;
}

.dashboard-column i {
    font-size: 20px;
    margin-right: 10px;
}

.dashboard-column:nth-child(1) i {
    color: rgb(133, 149, 244);
}

.dashboard-column:nth-child(2) i {
    color: rgb(173, 133, 244);
}

.dashboard-column:nth-child(3) i {
    color: rgb(116, 168, 181);
}

.dashboard-column:nth-child(4) i {
    color: rgb(244, 133, 149);
}

.dashboard-column:nth-child(5) i {
    color: #67c23a;
}

.dashboard-charts {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20px 0;
}

.dashboard-chart {
    box-sizing: border-box;
    width: 49%;
    min-width: 49%;
    padding: 20px;
    height: 500px;
    background-color: #fcfeff;
    overflow: hidden;
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
    box-shadow: 0px 0px 0px 0px rgba(150, 150, 150, 0.35);
}

.dashboard-chart:hover {
    transform: translateY(-5px);
    box-shadow: 0px 5px 10px 5px rgba(150, 150, 150, 0.35);
}
</style>